<template>
  <div class="layout_billdetail gray_bg">
    <div class="gray-shadow"></div>

    <div class="my-top">
      <div>
        <span class="top-title">请使用pos机扫描以下订单信息二维码</span>
        <div class="image-box">
          <!-- http://butler_test.act.yuepinyuemei.com/api/butler/get_pay_code?order_sn= -->
          <img :src="this.code_url" alt />
        </div>
      </div>
    </div>

    <div class="main">
      <div class="title">
        <span class="l-line"></span>
        <span class="r-line">核对流水单信息</span>
      </div>
      <div class="content">
        <ul class="c-ul">
          <li>
            <span class="l-tip">客户姓名:</span>
            {{this.detail.userName}}
          </li>
          <li>
            <span class="l-tip">客户手机:</span>
            {{this.detail.userPhone}}
          </li>
          <li>
            <span class="l-tip">医院名称:</span>
            {{this.detail.hospitalName}}
          </li>
          <li>
            <span class="l-tip">应付金额:</span>
            ¥{{this.detail. onlineMoney}}
          </li>
          <li>
            <span class="l-tip">已支付金额:</span>
            ¥{{this.detail.payPrice}}
          </li>
        </ul>
      </div>

      <div class="sure-pay">
        <button @click="surePay">确认已支付</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import api from "../../assets/js/api";

export default {
    name: "paydetail",
    data() {
        return {
            order_sn: "",

            code_url: "",

            detail: {}
        };
    },
    created() {
        this.order_sn = location.hash.split(":")[1];
        console.log("流水单sn =>", this.order_sn);

        this.code_url =
            api + "api/butler/get_pay_code?order_sn=" + this.order_sn;
        console.log("code_url =>", this.code_url);
    },
    mounted() {
        this.axios.defaults.baseURL = api;
        this.getBilldetail();
    },
    components: {},
    props: {},
    watch: {},
    computed: {},
    methods: {
        getBilldetail() {
            if (!this.order_sn) {
                return false;
            }
            let load = this.loading("加载中");
            load.show();
            this.axios
                .post("/api/butler/pay_info", {
                    order_sn: this.order_sn
                })
                .then(res => {
                    load.hide();
                    if (res.data.code == 200) {
                        this.detail = res.data.data;
                        console.log(this.detail);
                    } else if (res.data.code == 250) {
                        Toast({
                            message: "登录过期，请重新登陆",
                            position: "bottom",
                            duration: 2000
                        });
                        this.$router.push("/login");
                        return false;
                    } else {
                        Toast({
                            message: res.data.msg,
                            position: "bottom",
                            duration: 2000
                        });
                        return false;
                    }
                })
                .catch(error => {
                    load.hide();
                    Toast({
                        message: "请求失败，请稍后重试",
                        position: "bottom",
                        duration: 2000
                    });
                });
        },

        surePay() {
            this.dialog = this.$createDialog({
                type: "confirm",
                title: "请确认客户已支付本订单",
                content: "如果客户已扣款成功，请勿退出耐心等待查询支付结果",
                confirmBtn: {
                    text: "确认",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: (e, promptValue) => {
                    this.$router.push("/billdetail:" + this.order_sn);
                }
            }).show();
        }
    }
};
</script>
<style lang="less" scoped>
.gray_bg {
  background-color: #f5f7fa;
  height: 100%;
}

.gray-shadow {
  height: 30px;
  width: 100%;
}

.my-top {
  .top-title {
    display: block;
    text-align: center;
    width: 100%;
  }
  .image-box {
    width: 60%;
    margin: 0px auto;

    img {
      width: 100%;
      height: auto;
    }
  }
}

.main {
  width: 100%;
  padding: 10px 10px;

  .title {
    color: #3a3a3a;
    font-size: 16px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    margin: 10px 0px;

    .l-line {
      display: block;
      float: left;
      width: 5px;
      height: 100%;
      background-color: #ffb6c5;
    }

    .r-line {
      margin-left: 10px;
    }
  }
  .content {
    background-color: #fff;

    .c-ul {
      padding: 0px 10px;
      li {
        line-height: 40px;
        height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #f6f6f6;

        .l-tip {
          color: #888888;
        }
      }
    }
  }

  .sure-pay {
    margin-top: 20px;
    button {
      display: block;
      margin: 0 auto;
      width: 60%;
    }
  }
}
</style>
